<template>
  <div class="home">

    <!--S顶部-->
    <roof
      :show-capsule="false">
    </roof>
    <!--E顶部-->

    <!--S胶囊-->
    <div
      id="capsule"
      :style="{height:capsule_height+'px','line-height':capsule_height+'px',top:systemInfo.statusBarHeight+'px'}">
      <i class="iconfont icon-weizhidingwei"></i>
      尧都区段店乡孙券村南大街3号
    </div>
    <!--E胶囊-->

    <!--S搜索框-->
    <div
      id="search"
      :style="{top:systemInfo.statusBarHeight + capsule_height+'px'}">
      <div class="scan"><i class="iconfont icon-saoma"></i></div>
      <a hover-class="none" href="/pages/list/main">
        <div class="search">
          <i class="iconfont icon-sousuo"></i>
          想要什么搜一下
        </div>
      </a>
    </div>
    <!--E搜索框-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      <scroll-view
        class="scroll"
        :scroll-y="true"
        :scroll-with-animation="true"
        @scroll="contentScroll"
        :scroll-top="scroll_top"
      >

        <!--S幻灯-->
        <div id="slide">
          <swiper class="slide"
                  :indicator-dots="true"
                  indicator-color="#999"
                  indicator-active-color="#FE6D6D">
            <swiper-item
              class="item">
              <a class="a" hover-class="none" href="/pages/radar/main">
                <img mode="aspectFill" src="https://img.meituan.net/msmerchant/4a953fe54ad2c3cef9547fc41ba8df9193526.jpg@380w_214h_1e_1c" />
              </a>
            </swiper-item>
            <swiper-item
              class="item">
              <a class="a" hover-class="none" href="/pages/radar/main">
                <img mode="aspectFill" src="https://p0.meituan.net/bbia/3e36af692ce40ea56575b7c19dc3581c464792.png@380w_214h_1e_1c" />
              </a>
            </swiper-item>
          </swiper>
        </div>
        <!--E幻灯-->

        <!--S公告-->
        <div id="notice">
          <div class="title">公告</div>
          <p class="content">酷源网络新模块上架，地摊宝上架地摊宝上架，欢迎购买，咨询QQ130556659</p>
        </div>
        <!--E公告-->

        <!--S分类-->
        <div id="classify">
          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-1.png)'}"></dt>
            <dd>美食</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-2.png)'}"></dt>
            <dd>蔬菜</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-3.png)'}"></dt>
            <dd>衣服</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-4.png)'}"></dt>
            <dd>服务</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-4.png)'}"></dt>
            <dd>服务</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-4.png)'}"></dt>
            <dd>服务</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-4.png)'}"></dt>
            <dd>服务</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-1.png)'}"></dt>
            <dd>美食</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-2.png)'}"></dt>
            <dd>蔬菜</dd>
          </dl>

          <dl>
            <dt :style="{'background-image':'url(https://file.geekdm.com/icon-3.png)'}"></dt>
            <dd>衣服</dd>
          </dl>
        </div>
        <!--E分类-->

        <!--S门店or摊位列表-->
        <div id="list">
          <stall-list></stall-list>
        </div>
        <!--E门店or摊位列表-->

      </scroll-view>
    </div>
    <!--E内容-->

    <!--S返回顶部按钮-->
    <div
      id="go-top"
      v-show="show_go_top"
      @click="clickGoTop"
    >
      <i class="iconfont icon-huidingbu"></i>
    </div>
    <!--E返回顶部按钮-->

    <!--S底部导航-->
    <i-tabbar></i-tabbar>
    <!--E底部导航-->
  </div>
</template>

<script>
  import store from '../../store/index'
  import roof from '../../components/roof/Roof'
  import iTabbar from '../../components/itabbar/ITabbar'
  import stallList from '../../components/stall-list/StallList'
  import { select } from '../../utils/index'
  export default{
    data () {
      return {
        // 胶囊高度
        capsule_height: 0,
        // 顶部填充区域高度
        content_padding_top: 0,
        // 是否显示返回顶部按钮
        show_go_top: false,
        // 滚动条位置
        scroll_top: null
      }
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    components: {
      roof,
      'i-tabbar': iTabbar,
      'stall-list': stallList
    },
    created () {
      this.setCapsuleHeight()
    },
    mounted () {
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#search')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      },
      /**
       * 页面滚动
       */
      contentScroll (ev) {
        if (ev.target.scrollTop >= 1500) {
          if (!this.show_go_top) this.show_go_top = true
        } else {
          if (this.show_go_top) this.show_go_top = false
        }
      },

      // Handel
      /**
       * 点击返回顶部
       */
      clickGoTop () {
        this.scroll_top = 0
        setTimeout(() => {
          this.scroll_top = null
        }, 100)
      }
    }
  }
</script>
<style scoped lang="less" src="./index.less"></style>
